<template>
  <el-dialog
    :visible.sync="$attrs.visable"
    width="760px"
    title="修改标签"
    :before-close="handleClose"
    append-to-body
  >
    <div class="labelcard">
      <div class="labelheader flexbetween c_text2">
        <el-input
          placeholder="搜索标签/标签组"
          v-model="queryParams.keyword"
          size="small"
          class="searchinput"
          @keyup.enter.native="handleQuery"
        >
          <el-button
            slot="append"
            size="small"
            icon="el-icon-search"
            @click="handleQuery"
          ></el-button>
        </el-input>
        <div class="f-14 c_text">
          <el-switch
            v-model="isSelcted"
            inactive-color="#B7B7B7"
            class="smallswitch"
            @change="handleSwitch"
          >
          </el-switch>
          仅显示已选中标签
        </div>
      </div>
      <div class="labelbody">
        <div class="checkgroup" v-for="(item, index) in dataList" :key="index">
          <div>
            <el-checkbox
              :indeterminate="item.isIndeterminate"
              v-model="item.checked"
              @change="handleCheckAllChange(item)"
            >
              {{ item.label }}
            </el-checkbox>
          </div>
          <div class="flex">
            <span
              v-for="(child, cindex) in item.children"
              :key="cindex"
              class="labelname commhover f-12 mr-8"
              @click="handleItem(index,child)"
              :class="{ active: child.checked }"
            >{{ child.label }}</span>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit">发 布</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      isSelcted: false,
      queryParams: {
        keyword: "",
      },
      treeList: [
        {
          label: "分组一",
          id: 1,
          checked: false,
          isIndeterminate: false,
          children: [
            { id: 2, label: "标签一", checked: false },
            { id: 3, label: "标签二", checked: false },
          ],
        },
        {
          label: "分组二",
          id: 5,
          checked: false,
          isIndeterminate: false,
          children: [
            { id: 6, label: "标签一", checked: false },
            { id: 7, label: "标签二", checked: false },
          ],
        },
      ],
      dataList:[],
      selectArr:[]
    };
  },
  props: {},
  created() {
    this.dataList = [...this.treeList]
  },
  computed:{
    filterLableList(){
      let arr = [];
      this.treeList.forEach(item=>{
        if(item.checked){
          arr.push(item)
        }else{
          let subcheck = item.children.filter(subitem=>subitem.checked)
          if(subcheck.length){
            let checkitem = {...item}
            checkitem.children = subcheck
            arr.push(checkitem)
          }
        }
      })
      return arr
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visable',false)
      this.$emit("close"); //关闭弹窗;
    },

    // 全选单个
    selectSingleCat(item) {
      console.log('item',item);
      let newArr = []
      if (item.checked) { // 全选
        this.treeList.map((subItem) => {
          if (subItem.id === item.id) {
            subItem.children.forEach(sitem=>{
              newArr.push(sitem.id);
              sitem.checked = true
            })
            // newArr = subItem.children
          }
        })

      } else {// 反选
        let ids=[];
        item.children.forEach(sitem=>{
          ids.push(sitem.id);
          sitem.checked = false
        })
        this.selectArr = this.selectArr.filter(arr=>!ids.includes(arr));
        console.log('this.selectArr',this.selectArr);
      }
      return newArr
    },

    handleCheckAllChange(item){
      let singleCatArr = this.selectSingleCat(item);
      console.log('singleCatArr:', singleCatArr)
      let newArr = this.selectArr.concat(singleCatArr);
      this.selectArr = Array.from(new Set(newArr)) // 数组去重
      console.log('selectArr', this.selectArr)
      this.dataList = [...this.treeList]
      item.isIndeterminate = false
      if(this.isSelcted){
        this.handleSwitch()
      }
    },

    handleItem(index,childitem){
      childitem.checked = !childitem.checked
      if(childitem.checked){// 如果选中
        this.selectArr.push(childitem.id)
      }else{ //取消选中
        this.selectArr.forEach((item,index)=>{
          if(item == childitem.id){
            this.selectArr.splice(index,1)
          }
        })
      }
      let filterArr = this.treeList[index].children.filter(item=> item.checked)
      if(!filterArr.length){
        this.treeList[index].checked = false
        this.treeList[index].isIndeterminate = false
      }else if(filterArr.length == this.treeList[index].children.length){
        this.treeList[index].checked = true
        this.treeList[index].isIndeterminate = false
      }else{
        this.treeList[index].checked = false
        this.treeList[index].isIndeterminate = true
      }
      this.dataList = [...this.treeList]
      if(this.isSelcted){
        this.handleSwitch()
      }
      console.log('this.selectArr:', this.selectArr)
    },

    handleSwitch(){
      if(this.isSelcted){
        this.dataList = this.filterLableList
        this.dataList.forEach(item=>{
          item.checked = true
          item.isIndeterminate = false
        })
      }else{
        this.dataList = this.treeList
      }
    },

    handleQuery() {
      if(!this.queryParams.keyword) return;
      let arr = [];
      this.dataList.forEach(item=>{
        if(item.label.indexOf(this.queryParams.keyword)!== -1){
          arr.push(item)
        }else{
          let subcheck = item.children.filter(subitem=>subitem.label.indexOf(this.queryParams.keyword)!== -1)
          if(subcheck.length){
            let checkitem = {...item}
            checkitem.children = subcheck
            arr.push(checkitem)
          }
          // item.children.forEach(subitem=>{
          //   if(subitem.label.indexOf(this.queryParams.keyword)!== -1){

          //   }
          // })
        }
      })
      // this.
    },

    handleSubmit(){},
  },
};
</script>
<style lang="scss" scoped>
.labelcard {
  border: 1px solid #e9e9e9;
}
.labelheader {
  background-color: #f9f9f9;
  border-bottom: 1px solid #e9e9e9;
  padding: 6px 16px;
}
.searchinput {
  width: 200px;
  ::v-deep .el-input-group__append {
    padding: 0 14px;
    background-color: #fff;
  }
}
.checkgroup {
  padding: 16px 16px 0;
}
.labelbody {
  height: 370px;
  padding-bottom: 12px;
  overflow-y: auto;
}
.labelname {
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #222;
  line-height: 20px;
  padding: 3px 8px;
  transition: all 0.3s;

  &.active {
    color: #2f54eb;
    border-color: #2f54eb;
    background-color: #fff;
  }
}
::v-deep .el-dialog__body {
  padding: 20px;
}
::v-deep .el-checkbox__label {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.65) !important;
}
</style>